<template>
	<view class="detail">
        <SRV-topbar :title="pageTitle" :isLeft="true"></SRV-topbar>
		<view v-if="pageResult.list.length > 0">
			<view  class="line" v-for="(item,index) in pageResult.list" :key="index">
				<view class="line-1">
					<view>{{item.createTime}}</view>
                    <view :class="item.status == -1 ? 'orange' : (item.status == -2 ? 'red' : '')">{{item.statusName}}</view>
				</view>
				<view class="line-2" v-if="item.type==1">{{item.account}}<span class="orange">￥{{item.money}}元</span>按照<span class="red">￥{{item.price}}元/个</span>购买了<span class="orange">{{item.num}}</span>个！</view>
				<view class="line-2" v-if="item.type==2">按照<span class="red">￥{{item.price}}元/个</span>申请提现<span class="orange">{{item.num}}</span>个超圳通，总金额：<span class="red">￥{{item.money}}</span>元，扣除手续费<span class="red">-￥{{item.commission}}</span>元，实际到账金额：<span class="red">￥{{item.real_money}}</span>元！</view>
                <view class="line-3" v-if="item.type==2">到账账号：{{item.account}}</view>
                <view class="line-3" v-if="item.type==2 && item.status==-1">驳回原因：<span class="red">{{item.remark}}</span></view>
                <view class="line-3" v-if="item.type==2 && item.status==0">
                    <view class="line-btn" @click="cancelWithdraw(item.id)">取消提现</view>
                </view>
			</view>
		</view>
		<view v-else class="nolist">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_nomsg.png" mode="widthFix"></image>
		    <text>暂无相关记录～</text>
		</view>
		<chartsPopup ref="chartsPopup"></chartsPopup>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import {Base64} from '../../static/base64.min.js';
	export default {
		data() {
			return {
                pageTitle: '买入日志',				
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 1,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList(){
				_self.pageParam.page++
				serve.request({
					url: '/other/czv/log',
					data: _self.pageParam,
                    v: '/v3'
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
            cancelWithdraw(id) {
                var _self = this;
                uni.showModal({
                    title: '提示',
                    content: '您确定取消该提现申请吗',
                    success: function(res) {
                        if (res.confirm) {
                            serve.request({
                            	url: '/other/czv/cancel-withdraw',
                            	data: {
                                    appkey: uni.getStorageSync('appkey'),
                                    'access-token': uni.getStorageSync('access-token'),
                                    'id': id,
                                },
                                v: '/v3',
                            }).then(res => {
                                uni.hideLoading();
                            	uni.showToast({
                            		title: res.message,
                                    icon: res.code == 200 ? "success" : "error",
                            		duration: 3000,
                            	    success: function() {
                            	        _self.pageParam.page=0;
                            	        _self.pageResult.list=[];
                            	        _self.getList();
                            	    },
                            	});
                            });
                        }
                    }
                });
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			_self.pageParam.type = options.type || 1;
			if(_self.pageParam.type == 1) {
				_self.title = '';
                _self.pageTitle = '买入日志'
			}
			if(_self.pageParam.type == 2) {
                _self.pageTitle = '提现日志'
			}
		},
		onShow() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.detail{
	    .line{
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
            flex-wrap: wrap;
            border: 4rpx #ebecf0 solid;
            margin: 20rpx;
            border-radius: 20rpx;
			.line-1 {
                display: flex;
                justify-content: space-between;
                width: 100vw;
                padding: 20rpx;
                border-bottom: 2rpx #bfbebd dashed;
            }
            .line-2 {
                width: 100vw;
                padding: 20rpx;
            }
            .line-3 {
                border-top: 2rpx #bfbebd dashed;
                width: 100vw;
                padding: 20rpx;
                display: flex;
            }
            .line-btn{
                width: 30vw;
                border: 1px solid #ffd900;
                text-align: center;
                background: #ffd900;
                border-radius: 20rpx;
                margin-left: auto;
                height: 48rpx;
                line-height: 48rpx;
            }
		}
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
	    .nolist{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size:28rpx;
            color:rgba(204,204,204,1);
            image{
                margin-top: 140rpx;
                width:112rpx;
                margin-bottom: 45rpx;
            }
        }
	    uni-modal .uni-modal__bd{      
	        white-space: pre-wrap;      
	    }
	}
</style>
